const path = require('path');
//为了在每次生成bundle.js的时候覆盖（清除）掉上一次的生成文件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
//为了清除LICENSE生成文件
const TerserPlugin = require("terser-webpack-plugin");

//css插件需要require进来
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

//HTML插件require进来
const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require('webpack');

var getHtmlConfig = function(name){
  return{
      template : './src/view/' + name + '.html',
      filename : 'view/' + name + '.html', //不可以使用[name]这种类型，插件实现问题
      inject   : true, //注入，很重要，帮你完成注入，识别网页中用到哪些，自动引用
      hash     : true, //统一更新版本文件（？
      chunks   : ['common',name],//跟它相关的入口是谁
      minify   : {
          collapseWhitespace : false
      }
  }
}

const { isPlainObject } = require('lodash');
<<<<<<< HEAD
<<<<<<< HEAD
const { O_EXCL } = require('constants');
=======
>>>>>>> e45c3cd6de284774765b63149daf3e8b54e83cb5
=======
>>>>>>> e45c3cd6de284774765b63149daf3e8b54e83cb5

 var config = {
  //入口和出口，入口：从什么地方开始；出口：打包成什么
    // entry: './src/index.js',
    entry:{
      // 从两个地方打包，有两个入口（举例
        'common': ['./src/page/common/index.js'],
        'index' : ['./src/page/index/index.js'],
<<<<<<< HEAD
<<<<<<< HEAD
        'login' : ['./src/page/login/index.js'],
        'catalog-main' : ['./src/page/catalog-main/index.js']
=======
        'login' : ['./src/page/login/index.js']
>>>>>>> e45c3cd6de284774765b63149daf3e8b54e83cb5
=======
        'login' : ['./src/page/login/index.js']
>>>>>>> e45c3cd6de284774765b63149daf3e8b54e83cb5
    },
    output: {
    //   打包之后的文件，不会再生成main.js，而生成bundle.js
        // filename: 'bundle.js',
        filename:'js/[name].js',
    // 打包之后的一个路径
        path: path.resolve(__dirname, 'dist')
    },
    // WebpackDevServer的配置 
    devServer : {
        port : 8888,//防止端口冲突
        contentBase : path.resolve(__dirname, 'dist')//部署哪个目录
    },
    module : {
        rules : [
          //碰到这样的文件，使用这两个loader
          {test : /\.css$/, 
            use : [
                {
                   loader : MiniCssExtractPlugin.loader,
                   options : {
                     publicPath : '../',
                   }
                },
                'css-loader'
              ] 
            },
<<<<<<< HEAD
<<<<<<< HEAD
            {
              test : /\.(png|svg|jpg|gif)$/,
              use  : {
                loader : 'url-loader',
                options: {
                  name : 'images/[name].[ext]',
                  limit:10,
                  esModule : false
                   }
                }
            },
            {
              test : /\.htm$/,
              use  :{
                loader  : 'html-loader',
                options :{
                  esModule:false,
                  minimize:false
                }
              }
            }
            
          ]
=======
            {test : /\.(png|svg|jpg|gif)$/,use : ['url-loader?limit=1000&name=images/[name].[ext]'] }
        ]
>>>>>>> e45c3cd6de284774765b63149daf3e8b54e83cb5
=======
            {test : /\.(png|svg|jpg|gif)$/,use : ['url-loader?limit=1000&name=images/[name].[ext]'] }
        ]
>>>>>>> e45c3cd6de284774765b63149daf3e8b54e83cb5
    },
    // 插件
    plugins:[
      // clean插件
        //每次重新形成dist都会clean这对WebpackDevServer不友好
        // new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename : 'css/[name].css'
        }),
        //针对于单页面，可以提炼出来，作为一个函数,复制 就方便多啦
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('login')),
<<<<<<< HEAD
<<<<<<< HEAD
        new HtmlWebpackPlugin(getHtmlConfig('catalog-main')),
=======
>>>>>>> e45c3cd6de284774765b63149daf3e8b54e83cb5
=======
>>>>>>> e45c3cd6de284774765b63149daf3e8b54e83cb5
        new webpack.HotModuleReplacementPlugin()//热替换
    ],
    // 优化
    optimization: {
        //代表最小化压缩，很乱，可以设置成false，不要压缩，看的清楚点
        minimize: false,
        minimizer: [
          new TerserPlugin({
            extractComments: false,//不将注释提取到单独的文件中
          }),
        ],
        splitChunks : {
          cacheGroups : {
            //公共代码
            commons : {
                name      : 'utils',
                chunks    : 'all',
                minChunks : 2 , //至少被两个文件引用过的就被认为是公共部分
                minSize   : 0 
              }
            //安装插件，暂时不用
            // venders : {
            // }
          }
        }
      },
      externals : {
        // 如果在网页里面已经引用了那个src="../../dist/js/index.js"那么webpake也可以引用进来作为一个外部变量放进来
        'jquery' : 'window.jQuery'
<<<<<<< HEAD
<<<<<<< HEAD
      },
      resolve  : {
        alias : {
          util           : __dirname + '/src/util',
          page           : __dirname + '/src/page',
          images         : __dirname + '/src/images',
          service        : __dirname + '/src/service',
          node_modules   : __dirname + '/node_modules'
        }
=======
>>>>>>> e45c3cd6de284774765b63149daf3e8b54e83cb5
=======
>>>>>>> e45c3cd6de284774765b63149daf3e8b54e83cb5
      }
};
module.exports = config;